<template>
    <fieldset>
        <legend>其它响应式api</legend>
        <h1>msg:{{ msg }}</h1>
        <h1>reverseMsg:{{ reverseMsg }}</h1>
        <input ref="iptDom" v-model="ipt" v-focus type="text">
        <h2>props.r:{{ props.r }}</h2>
        <h2>testMsg:{{ testMsg }}</h2>
        <button @click="stopWatch">点击停止侦听</button>
    </fieldset>
</template>
<script setup>
import {computed, onBeforeMount, reactive, ref, watchEffect} from "vue"
//computed 计算属性 特性和选项式里面是一样的


let msg = ref('在小小的花园里面种大大的种子')

//计算属性,computed可以调用多次,每次都可以返回一个新的计算属性
let reverseMsg = computed(() => {
    return msg.value.split("").reverse().join("")
})

setTimeout(() => {
    msg.value = '挖呀挖哇哇哇哇'
}, 3000)

//-------------组件生命周期----------------

onBeforeMount(() => {
    console.log('beforeMount')
})

// ---------------watch-----------------

//1.基本语法

let ipt = ref('')

// watch(ipt, (newVal, oldVal) => {
//     console.log('newVal---', newVal)
//     console.log('oldVal---', oldVal)
// })

//2.侦听props的变化

//侦听响应式变量的某一个属性变化,而这个属性由是简单数据类型,watch的时候传入函数

let props = defineProps(['r']);

// console.log(props.r)

// watch(() => props.r, (newVal, oldVal) => {
//     console.log('newVal---', newVal)
//     console.log('oldVal---', oldVal)
// })

//3.深度侦听

let obj = reactive({
    name: '李雷',
    person: {
        nickname: '韩梅梅',
        age: 30
    }
})

// watch(() => obj.person, (newVal, oldVal) => {
//     console.log('newVal---', newVal)
//     console.log('oldVal---', oldVal)
// }, {
//     //深度侦听
//     deep: true,
//     //立即调用
//     immediate: true
// })

//4.侦听多个数据的变化

// watch([obj, ipt], (newVal, oldVal) => {
//     console.log('newVal---', newVal)
//     console.log('oldVal---', oldVal)
// }, {
//     immediate: true
// })


//5.watchEffect 高级侦听器

//不需要指定特定的侦听变量

//像computed但是业务场景不一样

//computed业务场景注重的事属性的结果,需要返回值

//watch不需要返回值,注重的是逻辑过程

let testMsg = ref("")

//watchEffect的返回值是一个函数,再次调用就可以停止侦听

//watchEffect在组件卸载之后也会停止侦听


let stop = watchEffect((onInvalidate) => {
    console.log('执行了watchEffect')
    testMsg.value = ipt.value + obj.person.age;

    onInvalidate(() => {
        //watchEffect即将重新执行
        console.log('watchEffect即将重新执行')
        //停止侦听的时候
    })

})

//停止侦听点击按钮的事件处理函数

let stopWatch = () => {
    stop() //停止侦听
}


//侦听ref引用的dom
//配置项
//pre是dom执行之前,post是dom执行之后

let iptDom = ref();

watchEffect(() => {
    console.log(iptDom.value)
}, {
    flush: 'post'
})


//----------------创建自定义指令--------------

//组合式创建自定义指令,只需要声明一个对象,对象的变量名需要以v开头,后面是指令的名字,指令名字的首字母要大写

// let vFocus = {
//     mounted(el, binding) {
//         el.style.color = 'red'
//         el.focus()
//     }
// }

fetch("/api/data/index.json")
    .then(response => response.json())
    .then(res => {
        console.log(res)
    })
</script>